<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>屏幕纯色测试工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#00B42A',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        info: '#86909C',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .screen-test {
                width: 100%;
                min-height: 100vh;
                transition: background-color 0.5s ease;
                position: relative;
            }
            .btn-test {
                @apply px-6 py-3 rounded-lg font-medium transition-all duration-300 shadow-lg;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 focus:ring-4 focus:ring-primary/30;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-4 focus:ring-secondary/30;
            }
            .btn-danger {
                @apply bg-danger text-white hover:bg-danger/90 focus:ring-4 focus:ring-danger/30;
            }
            .btn-warning {
                @apply bg-warning text-white hover:bg-warning/90 focus:ring-4 focus:ring-warning/30;
            }
            .btn-dark {
                @apply bg-dark text-white hover:bg-dark/90 focus:ring-4 focus:ring-dark/30;
            }
            .panel {
                @apply bg-white/90 backdrop-blur-md rounded-xl shadow-xl p-6 transition-all duration-300 border border-gray-200;
            }
            .color-btn {
                @apply w-16 h-16 rounded-full shadow-md cursor-pointer transition-all duration-300 transform hover:scale-110 hover:shadow-lg;
            }
            .control-panel {
                @apply fixed bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-4xl z-40 transition-all duration-500;
            }
            .floating-btn {
                @apply fixed bottom-6 right-6 z-50 p-4 rounded-full bg-primary text-white shadow-xl transition-all duration-300 hover:bg-primary/90;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen">
    <!-- 导航栏 -->
    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-2xl font-bold text-primary flex items-center">
                <i class="fa fa-mobile-phone mr-2 text-3xl"></i>
                屏幕纯色测试工具
            </h1>
            <button id="toggleTheme" class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                <i class="fa fa-moon-o text-gray-600"></i>
            </button>
        </div>
    </nav>

    <!-- 测试区域 -->
    <div id="testArea" class="screen-test bg-white flex items-center justify-center">
        <!-- 测试模式按钮 -->
        <button id="toggleTestMode" class="floating-btn">
            <i class="fa fa-play-circle-o text-2xl"></i>
        </button>
        
        <!-- 初始说明面板 -->
        <div id="introPanel" class="panel max-w-md text-center">
            <h3 class="text-xl font-bold mb-4">屏幕纯色测试</h3>
            <p class="text-gray-600 mb-6">点击下方按钮开始测试，或直接使用底部控制面板选择颜色</p>
            <button id="startTestBtn" class="btn-primary w-full">
                <i class="fa fa-arrow-right mr-2"></i>开始测试
            </button>
        </div>
    </div>

    <!-- 底部控制面板 -->
    <div id="controlPanel" class="control-panel">
        <div class="panel">
            <div class="flex flex-wrap items-center justify-between mb-4">
                <h3 class="font-bold text-lg">选择测试颜色</h3>
                <div class="flex items-center space-x-2">
                    <span class="text-sm text-gray-600">循环速度:</span>
                    <select id="cycleSpeed" class="text-sm border rounded px-2 py-1">
                        <option value="1000">快速</option>
                        <option value="2000" selected>中速</option>
                        <option value="3000">慢速</option>
                    </select>
                </div>
            </div>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mb-6">
                <div id="btnWhite" class="color-btn bg-white border border-gray-300" title="白色"></div>
                <div id="btnBlack" class="color-btn bg-black" title="黑色"></div>
                <div id="btnRed" class="color-btn bg-red-500" title="红色"></div>
                <div id="btnGreen" class="color-btn bg-green-500" title="绿色"></div>
                <div id="btnBlue" class="color-btn bg-blue-500" title="蓝色"></div>
                <div id="btnYellow" class="color-btn bg-yellow-500" title="黄色"></div>
            </div>
            
            <div class="flex flex-wrap gap-3 justify-center">
                <button id="btnAutoCycle" class="btn-primary">
                    <i class="fa fa-refresh mr-2"></i>自动循环
                </button>
                <button id="btnFullscreen" class="btn-secondary">
                    <i class="fa fa-expand mr-2"></i>全屏模式
                </button>
                <button id="btnReset" class="btn-warning">
                    <i class="fa fa-undo mr-2"></i>重置
                </button>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 transition-all duration-300" id="footer">
        <div class="container mx-auto px-4 text-center">
            <p>屏幕纯色测试工具 &copy; 2025</p>
            <p class="text-gray-400 mt-2">用于检测手机/平板屏幕坏点、条纹和颜色异常</p>
        </div>
    </footer>

    <script>
        // 全局变量
        let colorCycleInterval;
        let isDarkMode = false;
        let isTestMode = false;
        const colors = ['#FFFFFF', '#000000', '#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
        let currentColorIndex = 0;

        // DOM元素
        const testArea = document.getElementById('testArea');
        const controlPanel = document.getElementById('controlPanel');
        const introPanel = document.getElementById('introPanel');
        const toggleTestMode = document.getElementById('toggleTestMode');
        const startTestBtn = document.getElementById('startTestBtn');
        const btnWhite = document.getElementById('btnWhite');
        const btnBlack = document.getElementById('btnBlack');
        const btnRed = document.getElementById('btnRed');
        const btnGreen = document.getElementById('btnGreen');
        const btnBlue = document.getElementById('btnBlue');
        const btnYellow = document.getElementById('btnYellow');
        const btnAutoCycle = document.getElementById('btnAutoCycle');
        const btnFullscreen = document.getElementById('btnFullscreen');
        const btnReset = document.getElementById('btnReset');
        const cycleSpeed = document.getElementById('cycleSpeed');
        const footer = document.getElementById('footer');
        const toggleTheme = document.getElementById('toggleTheme');

        // 初始化事件监听
        function initEventListeners() {
            // 颜色按钮
            btnWhite.addEventListener('click', () => setTestColor('#FFFFFF'));
            btnBlack.addEventListener('click', () => setTestColor('#000000'));
            btnRed.addEventListener('click', () => setTestColor('#FF0000'));
            btnGreen.addEventListener('click', () => setTestColor('#00FF00'));
            btnBlue.addEventListener('click', () => setTestColor('#0000FF'));
            btnYellow.addEventListener('click', () => setTestColor('#FFFF00'));
            
            // 自动循环颜色
            btnAutoCycle.addEventListener('click', toggleColorCycle);
            
            // 全屏模式
            btnFullscreen.addEventListener('click', toggleFullscreen);
            
            // 重置
            btnReset.addEventListener('click', resetTest);
            
            // 测试模式切换
            toggleTestMode.addEventListener('click', toggleTestModeFunc);
            startTestBtn.addEventListener('click', toggleTestModeFunc);
            
            // 主题切换
            toggleTheme.addEventListener('click', toggleDarkMode);
            
            // 循环速度变更
            cycleSpeed.addEventListener('change', updateCycleSpeed);
        }

        // 设置测试区域颜色
        function setTestColor(color) {
            testArea.style.backgroundColor = color;
            stopColorCycle();
        }

        // 自动循环颜色
        function toggleColorCycle() {
            if (colorCycleInterval) {
                stopColorCycle();
                btnAutoCycle.innerHTML = '<i class="fa fa-refresh mr-2"></i>自动循环';
            } else {
                const speed = parseInt(cycleSpeed.value);
                colorCycleInterval = setInterval(() => {
                    currentColorIndex = (currentColorIndex + 1) % colors.length;
                    testArea.style.backgroundColor = colors[currentColorIndex];
                }, speed);
                
                btnAutoCycle.innerHTML = '<i class="fa fa-pause mr-2"></i>停止循环';
            }
        }

        // 更新循环速度
        function updateCycleSpeed() {
            if (colorCycleInterval) {
                stopColorCycle();
                toggleColorCycle();
            }
        }

        // 停止颜色循环
        function stopColorCycle() {
            if (colorCycleInterval) {
                clearInterval(colorCycleInterval);
                colorCycleInterval = null;
                btnAutoCycle.innerHTML = '<i class="fa fa-refresh mr-2"></i>自动循环';
            }
        }

        // 切换全屏模式
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    console.error(`全屏请求错误: ${err.message}`);
                });
                btnFullscreen.innerHTML = '<i class="fa fa-compress mr-2"></i>退出全屏';
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    btnFullscreen.innerHTML = '<i class="fa fa-expand mr-2"></i>全屏模式';
                }
            }
        }

        // 切换测试模式
        function toggleTestModeFunc() {
            isTestMode = !isTestMode;
            
            if (isTestMode) {
                // 进入测试模式
                introPanel.style.display = 'none';
                controlPanel.style.transform = 'translate(-50%, 150%)';
                footer.style.transform = 'translateY(100%)';
                toggleTestMode.innerHTML = '<i class="fa fa-ellipsis-h text-2xl"></i>';
                toggleTestMode.classList.remove('bg-primary');
                toggleTestMode.classList.add('bg-dark');
            } else {
                // 退出测试模式
                introPanel.style.display = 'block';
                controlPanel.style.transform = 'translate(-50%, 0)';
                footer.style.transform = 'translateY(0)';
                toggleTestMode.innerHTML = '<i class="fa fa-play-circle-o text-2xl"></i>';
                toggleTestMode.classList.remove('bg-dark');
                toggleTestMode.classList.add('bg-primary');
            }
        }

        // 重置测试
        function resetTest() {
            stopColorCycle();
            setTestColor('#FFFFFF');
            if (isTestMode) {
                toggleTestModeFunc();
            }
        }

        // 切换深色模式
        function toggleDarkMode() {
            isDarkMode = !isDarkMode;
            const body = document.body;
            
            if (isDarkMode) {
                body.classList.add('bg-gray-900', 'text-white');
                toggleTheme.innerHTML = '<i class="fa fa-sun-o text-yellow-400"></i>';
            } else {
                body.classList.remove('bg-gray-900', 'text-white');
                toggleTheme.innerHTML = '<i class="fa fa-moon-o text-gray-600"></i>';
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            initEventListeners();
        });
    </script>
</body>
</html>